import React from 'react';
import { Tabs, Form, Input, Select, Switch, InputNumber, Typography, Collapse } from 'antd';
import { CodeOutlined, SettingOutlined, BgColorsOutlined } from '@ant-design/icons';

const { Title } = Typography;
const { Panel } = Collapse;
const { Option } = Select;

/**
 * 属性面板组件
 * @returns 属性面板组件
 */
const PropertyPanel: React.FC = () => {
  const [form] = Form.useForm();

  // 没有选中组件时的界面
  const emptyPanel = (
    <div style={{ textAlign: 'center', color: '#999', padding: '20px 0' }}>
      <p>请选择一个组件进行配置</p>
    </div>
  );

  // 属性配置表单
  const propertiesPanel = (
    <Form form={form} layout="vertical">
      <Collapse defaultActiveKey={['basic']}>
        <Panel header="基础属性" key="basic">
          <Form.Item label="组件ID" name="id">
            <Input placeholder="组件唯一标识" />
          </Form.Item>
          <Form.Item label="名称" name="name">
            <Input placeholder="组件名称" />
          </Form.Item>
          <Form.Item label="是否可见" name="visible" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Panel>
        <Panel header="样式属性" key="style">
          <Form.Item label="宽度" name="width">
            <InputNumber style={{ width: '100%' }} addonAfter="px" />
          </Form.Item>
          <Form.Item label="高度" name="height">
            <InputNumber style={{ width: '100%' }} addonAfter="px" />
          </Form.Item>
          <Form.Item label="内边距" name="padding">
            <InputNumber style={{ width: '100%' }} addonAfter="px" />
          </Form.Item>
          <Form.Item label="边框样式" name="borderStyle">
            <Select>
              <Option value="none">无</Option>
              <Option value="solid">实线</Option>
              <Option value="dashed">虚线</Option>
              <Option value="dotted">点线</Option>
            </Select>
          </Form.Item>
        </Panel>
        <Panel header="数据属性" key="data">
          <Form.Item label="数据源" name="dataSource">
            <Select>
              <Option value="api">API接口</Option>
              <Option value="static">静态数据</Option>
              <Option value="context">上下文变量</Option>
            </Select>
          </Form.Item>
          <Form.Item label="数据路径" name="dataPath">
            <Input placeholder="数据访问路径" />
          </Form.Item>
        </Panel>
        <Panel header="事件处理" key="events">
          <Form.Item label="点击事件" name="onClick">
            <Select>
              <Option value="none">无</Option>
              <Option value="openUrl">打开链接</Option>
              <Option value="submitForm">提交表单</Option>
              <Option value="custom">自定义函数</Option>
            </Select>
          </Form.Item>
        </Panel>
      </Collapse>
    </Form>
  );

  // 定义Tabs项
  const tabItems = [
    {
      key: '1',
      label: (
        <span>
          <SettingOutlined /> 属性
        </span>
      ),
      children: propertiesPanel,
    },
    {
      key: '2',
      label: (
        <span>
          <BgColorsOutlined /> 样式
        </span>
      ),
      children: emptyPanel,
    },
    {
      key: '3',
      label: (
        <span>
          <CodeOutlined /> 高级
        </span>
      ),
      children: emptyPanel,
    },
  ];

  return (
    <div>
      <Title level={4}>属性配置</Title>
      <Tabs defaultActiveKey="1" items={tabItems} />
    </div>
  );
};

export default PropertyPanel;
